<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="收银台" navbarType='0'></wlk-navbar>
		<block v-if="!loading">
			<block v-if="order.counttime>0 || order.expiretime==0">
				<view class="wlkflex time-info" v-if="order.counttime>0">
					<view class="title">支付剩余时间</view>
					<u-count-down ref="countDown" :time="order.counttime||60" @finish="close"
						format="HH:mm:ss"></u-count-down>
				</view>
				<view class="price-info mt20">
					<text>￥</text>
					<text class="price">{{ order.total_fee || '0.00' }}</text>
				</view>
				<view v-if="type !== 'recharge'" class="line-info wlkflex justify-between">
					<view class="title u-line-1">
						{{order.line_info?order.line_info.title:''}}
					</view>
					<view class="detail wlkflex" @click="$Router.push('/pages/order/detail?id='+order.id)">
						<text>订单详情</text>
						<u-icon name="arrow-right" color="#999" size="15" class="mt05"></u-icon>
					</view>
				</view>
				<view v-if="type === 'recharge'" class="line-info center">
					充值订单
				</view>
				<view class="item bgw shadow br08 wlkflex justify-between" @click="radioChange('wechat')">
					<view>
						<u-icon name="weixin-fill" size="30" color="#07C160"></u-icon>
					</view>
					<view class="item-info">
						微信支付
					</view>
					<view class="passenger-icon">
						<view class="icon-wrap wlkflex justify-center"
							:style="{backgroundColor: payType==='wechat'?themeColor:'#FFFFFF',borderColor:payType==='wechat'?themeColor:'#c8c9cc'}">
							<u-icon name="checkbox-mark" size="12" color="#FFFFFF" v-if="payType=='wechat'"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="type != 'recharge'" class="item bgw shadow br08 wlkflex justify-between"
					@click="radioChange('wallet')">
					<view>
						<u-icon name="rmb-circle" size="30" color="#999"></u-icon>
					</view>
					<view class="item-info">
						钱包支付
					</view>
					<view class="passenger-icon">
						<view class="icon-wrap wlkflex justify-center"
							:style="{backgroundColor: payType==='wallet'?themeColor:'#FFFFFF',borderColor:payType==='wallet'?themeColor:'#c8c9cc'}">
							<u-icon name="checkbox-mark" size="12" color="#FFFFFF" v-if="payType=='wallet'"></u-icon>
						</view>
					</view>
				</view>
				<view class="wlk-fixed-btn">
					<u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          
                }" :color="themeColor" size="large" throttleTime="500" @click="payReady" text="确认支付"></u-button>
				</view>
			</block>
			<block v-else>
				<view class="not-data">
					<u-empty :icon="uEmpty.order" text="订单已过期">
					</u-empty>
				</view>
			</block>
		</block>
		<u-modal :show="payModel" :title="payType=='wallet'?'钱包支付':'微信支付'" showCancelButton @confirm="confirm"
			@cancel="payModel=false" :confirmColor="themeColor"
			:content="'是否支付:'+order.total_fee || '0.00'+'元?'"></u-modal>
	</view>
</template>

<script>
	var _self;
	import PaymentSelector from '@/wlkutils/pay';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['themeColor', 'uEmpty'])
		},
		data() {
			return {
				id: '',
				type: '',
				order: [],
				payType: 'wechat',
				timeEnd: false,
				payModel: false,
				timeData: {},
				loading: true,
				discout_price: '',
				coupon_id: '',
			};
		},
		onLoad(options) {
			_self = this;
			_self.id = parseFloat(this.$Route.query.id);
			_self.type = this.$Route.query.type;
			_self.discout_price = this.$Route.query.discout_price;
			_self.coupon_id = this.$Route.query.coupon_id;
		},
		onShow() {
			this.getData();
		},
		methods: {
			radioChange(n) {
				this.payType = n;
			},
			timeFinish() {
				this.timeEnd = true;
			},
			onTimeChange(e) {
				this.timeData = e
			},
			getData() {
				this.loading = true;
				uni.$u.http.post('pay/getOrder', {
					id: _self.id,
					type: _self.type,
					coupon_id: _self.coupon_id,
					discout_price: _self.discout_price
				}).then(res => {
					_self.order = res.data.order;
					_self.loading = false;
				});
			},
			close() {
				this.order.counttime = 0;
			},
			async payReady() {
				//  #ifdef MP-WEIXIN
				var typeArr = ['order'];
				if (_self.payType == 'wallet') {
					typeArr.push('money');
				}
				try {
					await this.$store.commit('subScribeMsg', typeArr);
					_self.payModel = true;
				} catch (error) {
					console.error('订阅消息请求失败', error);
				}
				//  #endif
				//  #ifndef MP-WEIXIN
				_self.payModel = true;
				//  #endif
			},
			async confirm() {
				this.payModel = false;
				new PaymentSelector(_self.payType, _self.order, _self.type);
			}

		},
	};
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF !important;

		.time-info {
			margin-top: 50rpx;

			.title {
				width: 50%;
				text-align: right;
				font-size: $font-base;
				color: $uni-text-color-grey;
				margin-right: 10rpx;
			}
		}

		.price-info {
			font-size: $font-lg;
			text-align: center;
			font-weight: bold;

			.price {
				font-size: 50rpx;
			}
		}

		.line-info {
			font-size: $font-base;
			color: $uni-text-color-grey;
			width: 80%;
			margin: 0 auto;
			padding: 30rpx 0;

			.title {
				width: 70%;
			}
		}

		.item {
			width: 90%;
			margin: 40rpx auto;
			padding: 40rpx 30rpx;
			font-size: $font-lt;

			.item-info {
				width: 80%;
			}

			.passenger-icon {
				.icon-wrap {
					width: 36rpx;
					height: 36rpx;
					border: 1px solid #c8c9cc;
					border-radius: 50%;
					transition-duration: 0.2s;
				}
			}
		}

		.wlk-fixed-btn {
			box-shadow: 0px -5px 5px rgba(0, 0, 0, 0);
		}
	}
</style>